<template>
  <div class="header" style="background: color">
    <!-- 头像 -->
    <el-col :span="8">
      <el-dropdown trigger="click">
        <!-- <div class="avatar"></div> -->
        <img class="avatar" :src="userData.profile.avatarUrl" alt="">
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="moreInfo" divided> 用户信息 </el-dropdown-item>
            <el-dropdown-item @click="switchMusictoWangYi" v-if="switchItem == '网易云'" divided> 网易云 </el-dropdown-item>
            <el-dropdown-item @click="switchMusictoKuGou" v-if="switchItem == 'KuGou'" divided> KuGou </el-dropdown-item>
            <el-dropdown-item @click="moreFeatures" divided> 更多功能 </el-dropdown-item>
            <el-dropdown-item @click="logout" divided> 退出登陆 </el-dropdown-item>
            <el-dropdown-item @click="writing" divided> 正在开发中... </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <!-- 昵称 -->
    <div class="userName">
      <span>{{ userData.profile.nickname }}</span>
    </div>
    <!-- 搜索 -->
    <div class="searchContent">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2">
      </el-input>
    </div>
    <!-- 当前使用 -->
    <div class="headerTitle animate__animated animate__headShake">
      <span>{{ title }}</span>
    </div>
  </div>
</template>

<script >
import { loginStatus, logout } from '../../netWork/easeRequest/easeLoginServer'

export default {
  name: "Homeheader",

  data() {
    return {
      title: '网易云',
      switchItem: 'KuGou',
      input2: '',
    }
  },

  props: {
    userData: {
      type: Object
    }
  },

  mounted() {},

  methods: {
    moreInfo: function() {
      // 更多信息
    },
    switchMusictoWangYi: function() {
      // console.log('切换到网易云')
      this.$notify({
        title: 'Switch',
        message: 'Now switch to yiMusic',
        type: 'warning',
        offset: 100
      })
      setTimeout(() => {
        this.title = '网易云'
        this.switchItem = 'KuGou'
        this.$notify({
          title: 'Switch',
          message: 'Has switched to 网易云',
          type: 'success',
          offset: 200
        })
      }, 2000)
    },
    switchMusictoKuGou: function() {
      this.$notify({
        title: 'Switch',
        message: 'Now switch to KuGou',
        type: 'warning',
        offset: 100
      })
      setTimeout(() => {
        this.title = 'KuGou'
        this.switchItem = '网易云'
        this.$notify({
          title: 'Switch',
          message: 'Has switched to KuGou',
          type: 'success',
          offset: 200
        })
      }, 2000)
    },
    moreFeatures: function() {
      console.log('更多功能')
    },
    logout: function() {
      loginStatus()
      .then(res=> {
        console.log(res)
      })
      // logout().then(res => {
      //   if(res.data.code == 200){
      //     this.$message({
      //       type: 'success',
      //       message: '已退出登录'
      //     })
      //   }else{
      //     this.$message({
      //       type: 'error',
      //       message: '错误'
      //     })
      //   }
      // })
    },
    writing: function() {
      this.$message({
        type: 'warning',
        message: '没看到正在开发呢吗？'
      })
    } 
  },
};
</script>

<style lang="less" scoped>
.header {
  background: #44a0ff;
  background: #ffffff;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 9px;
  margin-bottom: 5px;

  .avatar {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-left: 15px;
    cursor: pointer;
    background: rgb(255, 163, 163);
  }
  
  .userName {
    position: absolute;
    top: 25px;
    left: 93px;
  }

  .searchContent {
      position: absolute;
      top: 25px;
      left: 330px;
      border-radius: 10px;
    }

  .headerTitle {
    margin-right: 20px;

    span{
      font-size: 30px;
      font-weight: bolder;
      color: #44a0ff;
      cursor: pointer;
    }
  }
}
</style>